<template>
  <div class="app-container">
    <el-button type="primary" @click="signIn">上班打卡</el-button>
    <el-button type="primary" @click="signOut">下班签退</el-button>
    <el-button
      type="primary"
      @click="dialogFormVisible = true"
    >补卡申请</el-button>

    <el-calendar>
      <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
      <template slot="dateCell" slot-scope="{ date, data }">
        <p :class="data.isSelected ? 'is-selected' : ''">
          {{ data.day.split("-").slice(1).join("-") }}
          {{ data.isSelected ? "✔️" : "" }}
          <br><br><span v-if="gettrue(date)">{{ getstatus(date) }}</span>
        </p>
      </template>
    </el-calendar>

    <div>
      <el-dialog title="补卡申请" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="申请人" :label-width="formLabelWidth">
            <el-input v-model="form.account" autocomplete="off" />
          </el-form-item>
          <el-form-item label="补卡日期" :label-width="formLabelWidth">
            <el-date-picker
              v-model="form.create_date"
              type="date"
              placeholder="选择日期"
            />
          </el-form-item>
          <el-form-item label="原因描述" :label-width="formLabelWidth">
            <el-input
              v-model="form.description"
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
            />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="dialogFormVisible = false"
          >确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { employeeAttendanceRecord, signIn, signOut } from '@/api/authendance'
export default {
  data() {
    return {
      today: new Date().toLocaleDateString(),
      attendances: [],
      dialogFormVisible: false,
      form: {
        account: '',
        create_date: '',
        description: ''
      },
      formLabelWidth: '120px'
    }
  },
  created() {
    const that = this
    employeeAttendanceRecord().then(function(re) {
      that.attendances = re.data
    })
  },
  methods: {
    gettrue(d) {
      let sta = false
      const as = JSON.parse(JSON.stringify(this.attendances))
      as.forEach(function(e) {
        const x = new Date(e.create_date)
        if (x.toLocaleDateString() === d.toLocaleDateString()) {
          sta = true
        }
      })
      return sta
    },
    getstatus(d) {
      let sta = ''
      const as = JSON.parse(JSON.stringify(this.attendances))

      as.forEach(function(e) {
        const x = new Date(e.create_date)
        if (x.toLocaleDateString() === d.toLocaleDateString()) {
          if (e.status === 'y') {
            sta = '正常'
          } else if (e.status === 'x') {
            sta = '缺勤'
          } else if (e.status === 'z') {
            sta = '旷工'
          } else if (e.status === 'v') {
            sta = '休假'
          }
        }
      })
      return sta
    },
    signIn() {
      const that = this
      signIn().then(function(re) {
        that.$message({
          message: '考勤成功',
          type: 'success'
        })
      })
    },
    signOut() {
      const that = this
      signOut().then(function(re) {
        that.$message({
          message: '签退成功',
          type: 'success'
        })
      })
    }
  }
}
</script>

<style>
.is-selected {
  color: red;
}
</style>
